<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Html5 Form</title>
</head>

<body>
	<form action="">
		<p>
			<label for="">自动聚焦</label>
			<input type="text" autofocus>
		</p>
		<p>
			<label for="">占位文本</label>
			<input type="text" placeholder="这里是占位文本">
		</p>
		<p>
			<label for="">复选框</label>
			<input type="checkbox">
		</p>
		<p>
			<label for="">单选按钮</label>
			<input type="radio">
		</p>
		<p>
			<label for="">密码输入框</label>
			<input type="passwotd">
		</p>
		<p>
			<label for="">下拉菜单</label>
			<select name="" id="">
				<option value="option1">下拉菜单文本1</option>
			</select>
		</p>
		<p>
			<label for="">文件选择器</label>
			<input type="file">
		</p>
		<p>
			<label for="">email地址类型输入框</label>
			<input type="email">
		</p>
		<p>
			<label for="">网址类型输入框</label>
			<input type="url">
		</p>
		<p>
			<label for="">数字类型输入框(数字选择器)</label>
			<input type="number" min="0" max="10" step="2" value="6">
		</p>
		<p>
			<label for="">滑块</label>
			<input type="range" min="0" max="10" step="2" value="6">
		</p>
		<p>
			<label for="">日期选择器</label>
			<input type="date">
			<label for="">日期和时间选择器</label>
			<input type="datetime">
			<label for="">只选年份和月份选择器</label>
			<input type="month">
			<label for="">只选年份和星期选择器</label>
			<input type="week">
			<label for="">选择时间</label>
			<input type="time">
		</p>
		<p>
			<label for="">搜索框</label>
			<input type="search">
		</p>
		<p>
			<label for="">颜色选择器</label>
			<input type="color">
			<input type="submit" value="提交按钮">
	</form>

	<p>对于不支持html5新增输入框类型的，建议采用JavaScript脚本的解决方案（如Modernizr检测、尝试Dojo或其他JavaScript框架来实现）</p>
</body>

</html>